<script setup>
  import { ref } from "vue";
  import { ElIcon } from 'element-plus';
  import router from "@/router/index.js";
  import { useRoute } from 'vue-router';

  const route = useRoute();
  const settingInnerRoutes = ref([
    {
      name: '设为首页',
      icon: 'promotion',
      path: '/setting/recommend',
      checked: route.path === '/setting/basic' || route.path === '/setting',
    }, {
      name: '个人信息',
      icon: 'user-filled',
      path: '/setting/user',
      checked: route.path === '/setting/basic',
    }, {
      name: '背景设置',
      icon: 'picture-filled',
      path: '/setting/background',
      checked: route.path === '/setting/basic',
    }, {
      name: '使用指南',
      icon: 'help-filled',
      path: '/setting/guide',
      checked: route.path === '/setting/basic',
    },
  ])

let bodyTitle = ref('');
settingInnerRoutes.value.forEach(x => {
  if (x.checked) {
    bodyTitle.value = x.name;
    return;
  }
  x.checked = false;
})

const toSetting = (item) => {
  settingInnerRoutes.value.forEach(x => {
    if (x.path === item.path) {
      bodyTitle.value = x.name;
      x.checked = true;
      return;
    }
    x.checked = false;
  })
  router.replace(item.path);
}

</script>

<template>

  <!-- 系统设置页面最外层盒子-->
  <div class="system-setting-basic">

    <!-- 系统设置头部最外层盒子 -->
    <div class="header-basic">

      <!-- 左侧标题盒子 -->
      <div class="header-title-basic">
        <div class="header-title-logo">
          <router-link to="/index" class="base-link-black">
            <img src="http://120.46.171.159:9000/biscuit-tag-page/avatar/default.jpg" alt="">
          </router-link>
        </div>
        <div class="header-title-text">设置</div>
      </div>

      <!-- 右侧用户盒子 -->
      <div class="header-user-basic">
        <div class="header-user-avatar"></div>
        <div class="header-user-name"></div>
      </div>

    </div>

    <!-- 系统设置内容最外层盒子 -->
    <div class="body-basic">

      <!-- 系统设置左侧菜单列表盒子 -->
      <div class="left-menu-list">

        <!-- 设置菜单项 -->
        <div :class="['menu-item', item.checked ? 'menu-item-not-default-color':'menu-item-default-color']"
             v-for="(item, index) in settingInnerRoutes" @click="toSetting(item)">
          <div  class="menu-item-icon">
            <el-icon>
              <component :is="item.icon"></component>
            </el-icon>
          </div>
          <div class="menu-item-text">{{ item.name }}</div>
        </div>

      </div>


      <!-- 系统设置内容显示 -->
      <div class="right-body">
        <BaseTitle :title="bodyTitle"></BaseTitle>
        <router-view></router-view>
      </div>

    </div>

  </div>
</template>

<style scoped>
  .base-link-black {
    text-decoration: none;
    color: rgb(38, 38, 38);
  }
  .base-link-white {
    text-decoration: none;
    color: rgb(38, 38, 38);
  }

  /* 系统设置页面最外层盒子基础样式 */
  .system-setting-basic {
    width: 100%;
    height: 100%;
    background-color: rgb(240, 240, 240);
  }

  /* 系统设置头部最外层盒子基础样式 */
  .header-basic {
    width: 100%;
    height: 70px;
    background-color: white;
    box-shadow: 0 1px 8px 3px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
  }

  /* 左侧标题盒子基础样式 */
  .header-title-basic {
    overflow: hidden;
    height: 70px;
    display: flex;
    justify-content: space-between;
    padding-left: 16px;
  }

  .header-title-logo {
    overflow: hidden;
    display: flex;
    align-items: center;
  }
  .header-title-logo img {
    width: 40px;
    height: auto;
  }
  .header-title-text {
    overflow: hidden;
    display: flex;
    align-items: center;
    font-size: 26px;
    margin-left: 12px;
  }


  .header-user-basic {
    height: 70px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    padding-right: 16px;
  }



  /* 系统设置内容最外层盒子基础样式 */
  .body-basic {
    width: 100vw;
    height: calc(100vh - 70px);
    position: relative;
    z-index: 1;
  }
  .body-basic>div {
    float: left;
  }


  /* 系统设置左侧菜单列表盒子样式 */
  .left-menu-list {
    width: 260px;
    height: calc(100% - 40px);
    overflow: scroll;
    padding-top: 40px;
  }

  .menu-item {
    padding-left: 25px;
    width: 180px;
    height: 40px;
    overflow: hidden;
    border-radius: 0 25px 25px 0;
  }
  .menu-item:hover {
    cursor: pointer;
  }
  .menu-item>div {
    float: left;
  }

  .menu-item-icon {
    overflow: hidden;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
  }
  .menu-item-text {
    overflow: hidden;
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-left: 12px;
  }

  .menu-item-default-color {
    color: rgb(68, 68, 68);
  }
  .menu-item-not-default-color {
    color: rgb(9, 82, 200);
    background-color: rgba(211, 227, 253);
  }

  .right-body {
    width: calc(100% - 260px - 60px);
    margin-left: 60px;
    height: calc(100% - 30px);
    padding-top: 30px;

    overflow: scroll;
  }

</style>